<script setup>
import {reactive, ref} from "vue";
import hear from "./home/header.vue";
import {denglu, register, getInfo} from "../api/index";
import {useCounterStore} from "../pina/index";
import {useRouter, useRoute} from "vue-router";
const router = useRouter();
const store = useCounterStore();

const ruleFormRef = ref();
const ruleForm = reactive({
  username: "",
  password: "",
  passwords: "",
  mobile: "",
});

const rules = reactive({
  name: [
    {required: true, message: "Please input Activity name", trigger: "blur"},
    {min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur"},
  ],
  username: [
    {
      required: true,
      message: "请输入账号",
      trigger: "change",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
    {
      min: 5,
      max: 20,
      message: "密码长度必须在5到20个字符之间",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "change",
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],
  passwords: [
    {
      required: true,
      message: "请再次输入密码",
      trigger: "change",
    },
    {
      min: 5,
      max: 20,
      message: "密码长度必须在5到20个字符之间",
      trigger: "blur",
    },
    {
      validator: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== ruleForm.password) {
          callback(new Error("两次输入密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "change",
    },
  ],
});

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (!zhusce.value) {
        denglu(ruleForm).then((res) => {
          if (res.code == 200) {
            getInfo().then((res) => {
              if (res.code == 200) {
                router.push({
                  name: "zhu",
                });
              }

              store.incrementUser(res.user);
            });
            // if(res.message&&res.message=='账号尚未激活')
            // return
            store.increment(res.token);
          }
        });
      } else {
        register(ruleForm).then((res) => {
          if (res.code == 200) {
            zhusce.value = !zhusce.value;
          }
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

let zhusce = ref(false);
const zhuce = () => {
  zhusce.value = !zhusce.value;
};
</script>

<template>
  <div style="height: 70px">
    <hear :bac="'#000'" />
  </div>
  <div
    style="
      width: 100%;
      height: calc(100vh - 60px);
      display: flex;
      justify-content: center;
      align-items: center;
    "
  >
    <el-card style="width: 600px; padding: 20px 0">
      <p
        style="
          font-weight: 600;
          text-align: center;
          margin-bottom: 20px;
          line-height: 1.25;
          font-size: 30px;
        "
      >
        登录 TQ
      </p>
      <el-form
        size="large"
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" show-password v-model="ruleForm.password" />
        </el-form-item>

        <el-form-item v-if="zhusce" label="确认密码" prop="passwords">
          <el-input
            type="password"
            show-password
            v-model="ruleForm.passwords"
          />
        </el-form-item>
        <el-form-item v-if="zhusce" label="手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile" />
        </el-form-item>
        <el-form-item>
          <div style="width: 100%; text-align: center; margin-top: 20px">
            <el-button
              style="
                background-color: rgb(78 168 185);
                width: 98%;
                height: 55px;
                border-radius: 10px;
              "
              type="primary"
              @click="submitForm(ruleFormRef)"
            >
              登录
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <span
        v-show="!zhusce"
        @click="zhuce"
        style="float: right; cursor: pointer; font-size: 12px"
      >
        注 册
      </span>
      <span
        v-show="zhusce"
        @click="zhuce"
        style="float: right; cursor: pointer; font-size: 12px"
      >
        登 录</span
      >
    </el-card>
  </div>
</template>

<style scoped></style>
